<template>
  <div class="envCompliance">
    <div class="content">
      <el-row class="title">
        <el-col :span="8">
          <span class="title-name">环境达标率
            <!--<span class="unit">(%)</span>--></span>
        </el-col>
        <el-col :span="16">
          <div class="right">
            <!-- <div class="env-type">
              <span>清洁区</span>
            </div>
            <div class="env-type">
              <span>半清洁区</span>
            </div>
            <div class="env-type">
              <span>污染区</span>
            </div> -->
          </div>
        </el-col>
      </el-row>
      <div class="flex1">
        <el-row type="flex"
                justify="space-between"
                style="width:100%">
          <div class="circle-box">
            <!-- <el-progress type="circle"
                         :percentage="tem.healthRate"
                         :show-text="false"
                         :width="width"
                         :stroke-width="12"
                         :color="changeColor(tem.healthRate)"></el-progress> -->
            <process chartId="tem"
                     :percentage="tem.healthRate"
                     :color="changeColor(tem.healthRate)"
                     title="温度"></process>
            <!-- <div class="circle-center">
              <div class="num">{{tem.healthRate}}</div>
              <div class="name">温度</div>
            </div>-->
            <div class="rate">
              <span :class="tem.level=='优秀'?'excellent':tem.level=='较优'?'better':tem.level=='良好'?'good':tem.level=='中等'?'secondary':tem.level=='较差'?'poor':'bad'">{{tem.level}}</span>
            </div>
          </div>
        </el-row>
        <el-row type="flex"
                justify="space-between"
                style="width:100%">
          <div class="circle-box">
            <!-- <el-progress type="circle"
                         :percentage="water.healthRate"
                         :show-text="false"
                         :width="width"
                         :color="changeColor(water.healthRate)"
                         :stroke-width="12"></el-progress> -->
            <process chartId="water"
                     :percentage="water.healthRate"
                     :color="changeColor(water.healthRate)"
                     title="相对湿度"></process>
            <!-- <div class="circle-center">
              <div class="num">{{water.healthRate}}</div>
              <div class="name">相对湿度</div>
            </div> -->
            <div class="rate">
              <span :class="water.level=='优秀'?'excellent':water.level=='较优'?'better':water.level=='良好'?'good':water.level=='中等'?'secondary':water.level=='较差'?'poor':'bad'">{{water.level}}</span>
            </div>
          </div>
        </el-row>
        <el-row type="flex"
                justify="space-between"
                style="width:100%">
          <div class="circle-box">
            <!-- <el-progress type="circle"
                         :percentage="co2.healthRate"
                         :show-text="false"
                         :width="width"
                         :color="changeColor(co2.healthRate)"
                         :stroke-width="12"></el-progress> -->
            <process chartId="co2"
                     :percentage="co2.healthRate"
                     :color="changeColor(co2.healthRate)"
                     title="CO₂浓度"></process>
            <!-- <div class="circle-center">
              <div class="num">{{co2.healthRate}}</div>
              <div class="name">CO₂浓度</div>
            </div> -->
            <div class="rate">
              <span :class="co2.level=='优秀'?'excellent':co2.level=='较优'?'better':co2.level=='良好'?'good':co2.level=='中等'?'secondary':co2.level=='较差'?'poor':'bad'">{{co2.level}}</span>
            </div>
          </div>
        </el-row>
        <el-row type="flex"
                justify="space-between"
                style="width:100%">
          <div class="circle-box">
            <!-- <el-progress type="circle"
                         :percentage="pm25.healthRate"
                         :show-text="false"
                         :width="width"
                         :color="changeColor(pm25.healthRate)"
                         :stroke-width="12"></el-progress> -->
            <process chartId="pm25"
                     :percentage="pm25.healthRate"
                     :color="changeColor(pm25.healthRate)"
                     title="PM2.5浓度"></process>
            <!-- <div class="circle-center">
              <div class="num">{{pm25.healthRate}}</div>
              <div class="name">PM2.5浓度</div>
            </div> -->
            <div class="rate">
              <span :class="pm25.level=='优秀'?'excellent':pm25.level=='较优'?'better':pm25.level=='良好'?'good':pm25.level=='中等'?'secondary':pm25.level=='较差'?'poor':'bad'">{{pm25.level}}</span>
            </div>
          </div>
        </el-row>
      </div>
    </div>
  </div>
</template>
<script>
import { getPlatformEvaluate } from "@/api/platformManage"
import Process from "./components/process"
export default {
  name: "envCompliance",
  components: { Process },
  props: {
    platformId: String
  },
  data() {
    return {
      chart: null,
      tem: {},
      water: {},
      co2: {},
      pm25: {},
      width: 180
    };
  },
  watch: {
    platformId(val) {
      getPlatformEvaluate(val).then(res => {
        // console.log(res);
        if (res.code == 200) {
          let arr = res.value;
          for (let i = 0; i < arr.length; i++) {
            const e = arr[i];
            if (e.type == 'TEMPERATURE') {
              this.tem = e;
              this.tem.healthRate = (e.healthRate == 'NaN') ? 0 : parseInt((e.healthRate).toFixed(2) * 100);
              this.tem.level = e.level < 0 ? 'N/A' : e.level;
            } else if (e.type == 'HUMIDITY') {
              this.water = e;
              this.water.healthRate = (e.healthRate == 'NaN') ? 0 : parseInt((e.healthRate).toFixed(2) * 100);
              this.water.level = e.level < 0 ? 'N/A' : e.level;
            } else if (e.type == 'CO2') {
              this.co2 = e;
              this.co2.healthRate = (e.healthRate == 'NaN') ? 0 : parseInt((e.healthRate).toFixed(2) * 100);
              this.co2.level = e.level < 0 ? 'N/A' : e.level;
            } else if (e.type == 'PM25') {
              this.pm25 = e;
              this.pm25.healthRate = (e.healthRate == 'NaN') ? 0 : parseInt((e.healthRate).toFixed(2) * 100);
              this.pm25.level = e.level < 0 ? 'N/A' : e.level;
            }

          }
        }
      })
    }
  },
  mounted() {
    window.addEventListener('resize', this.resizeHandler)

  },
  beforeDestroy() {
    window.removeEventListener('resize', this.resizeHandler)
  },
  methods: {
    resizeHandler(e) {
      //   console.log(window.innerWidth);
      if (window.innerWidth <= 1670) {
        this.width = 150
      } else {
        this.width = 170
      }
    },
    changeColor(val) {
      if (val <= 25) {
        return '#FE4516';
      } else if (val >= 26 && val <= 50) {
        return '#FEA917';
      } else if (val >= 51 && val <= 75) {
        return '#FCD32E';
      } else if (val >= 76 && val <= 100) {
        return '#3BC421';
      } else {
        return '#FE4516';
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.envCompliance {
  background-color: #fff;
  width: 100%;
  height: 329px;
  background-color: #fff;
  border-radius: 12px;
  padding: 20px;
  .content {
    height: 100%;
    display: flex;
    justify-content: start;
    flex-direction: column;
    .flex1 {
      width: 100%;
      flex: 1;
      display: flex;
      align-items: center;
      vertical-align: middle;
    }
  }
  .title {
    align-items: center;
    .title-name {
      font-size: 20px;
      font-weight: bold;
      line-height: 27px;
      color: #0a0a0a;
      .unit {
        // font-size: 12px;
        font-weight: 400;
        line-height: 27px;
        color: #707070;
      }
    }
    .right {
      display: flex;
      justify-content: flex-end;
      align-items: center;
    }
    .env-type {
      font-size: 12px;
      font-weight: 400;
      //   line-height: 16px;
      color: #262626;
      display: flex;
      align-items: center;
      margin-left: 10px;
      .clear-div {
        margin-left: 3px;
        width: 19px;
        height: 6px;
        background: #2d9dff;
      }
      .half-clear-div {
        margin-left: 3px;
        width: 19px;
        height: 6px;
        background: #ffad32;
      }
      .pollution-div {
        margin-left: 3px;
        width: 19px;
        height: 6px;
        background: #b6c2d2;
      }
    }
  }
}
.circle-box {
  margin: auto;
  position: relative;
  text-align: center;
  width: 190px;
  .rate {
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
    color: #707070;
    text-align: center;
  }

  .excellent {
    color: green;
    font-size: 18px;
  }
  .better {
    color: #00CC33;
    font-size: 18px;
  }
  .good {
    color: blue;
    font-size: 18px;
  }
  .secondary {
    color: #0099FF;
    font-size: 18px;
  }
  .poor {
    color: #FF6600;
    font-size: 18px;
  }
  .bad {
    color: red;
    font-size: 18px;
  }
  .circle-center {
    width: 80px;
    height: 80px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -40px;
    margin-top: -40px;
    .num {
      font-size: 36px;
      font-weight: 400;
      line-height: 43px;
      color: #0a0a0a;
    }
    .name {
      font-size: 12px;
      font-weight: 400;
      line-height: 16px;
      color: #707070;
    }
  }
}
@media screen and (max-width: 1670px) {
  .circle-box {
    margin: auto;
    position: relative;
    text-align: center;
    width: 160px;
    .rate {
      font-size: 12px;
      font-weight: 400;
      line-height: 16px;
      color: #707070;
      text-align: center;
    }

    .excellent {
      color: green;
      font-size: 18px;
    }
    .better {
      color: #00CC33;
      font-size: 18px;
    }
    .good {
      color: blue;
      font-size: 18px;
    }
    .secondary {
      color: #0099FF;
      font-size: 18px;
    }
    .poor {
      color: #FF6600;
      font-size: 18px;
    }
    .bad {
      color: red;
      font-size: 18px;
    }
    .circle-center {
      width: 80px;
      height: 80px;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-left: -40px;
      margin-top: -40px;
      .num {
        font-size: 36px;
        font-weight: 400;
        line-height: 43px;
        color: #0a0a0a;
      }
      .name {
        font-size: 12px;
        font-weight: 400;
        line-height: 16px;
        color: #707070;
      }
    }
  }
}
</style>
